<template>
  <!-- <div class="container"> -->
  <el-row>
    <el-col :span="6">
      <!-- <h1>产妇个人信息</h1> -->
      <el-row class="mb-2">
        <el-button-group>
          <el-button type="primary" text @click="newBook">新建</el-button>
          <el-button type="primary" text onclick="location.reload()">刷新</el-button>
          <el-button type="primary" text>查询</el-button>
        </el-button-group>
      </el-row>
      <el-row class="mb-2">
        <el-input v-model="search" style="width: 90%">
          <template #append>
            <p>读卡</p>
          </template>
        </el-input>
      </el-row>
      <el-table :data="filterRecords" size="small" highlight-current-row @current-change="handleCurrentChange"
        style="width: 100%">
        <el-table-column prop="name" label="姓名" width="60" />
        <!-- <el-table-column prop="age" label="年龄" width="40" /> -->
        <el-table-column prop="registrationTime" label="建册时间" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === '已完成' ? 'success' : 'warning'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="18" style="border: 1px solid #ccc; padding: 10px; border-radius: 10px">
      <el-form :inline="true" :model="data" class="demo-form-inline" label-width="80" label-position="left"
        size="small">
        <!-- 头部产妇基本信息展示 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="data.baseInfo.name" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="病历号">
              <el-input v-model="data.baseInfo.medicalNo" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="孕周">
              <el-input v-model="data.baseInfo.week" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预产期">
              <el-input v-model="data.baseInfo.dueDate" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 建卡医生或者遇见卡审核医生 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="建档案医生">
              <el-input v-model="data.doctorName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="建档时间">
              <el-input v-model="data.filingTime" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button>保存建档信息</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <div class="bg-blue-50 w-full mb-4">
            <span class="text-lg font-medium mb-4">母亲信息</span>
          </div>
          <el-row class="w-full" :gutter="20">
            <el-col :span="6">
              <el-form-item label="孕妇姓名">
                <el-input v-model="data.baseInfo.name" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="证件类型">
                <el-select v-model="data.baseInfo.idCardType" placeholder="请选择" size="small">
                  <el-option v-for="item in options" :key="item.id" :label="item.type" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="身份证号码">
                <el-input v-model="data.baseInfo.idCard" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年龄">
                <el-input v-model="data.baseInfo.age">
                  <template #append>
                    <span>岁</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="w-full" :gutter="20">
            <el-col :span="6">
              <el-form-item label="姓名拼音">
                <el-input v-model="data.baseInfo.pinyinName" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="手机号码">
                <el-input v-model="data.baseInfo.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="国籍">
                <el-select v-model="data.baseInfo.nationality" placeholder="请选择" size="small" style="width: 100%;">
                  <el-option v-for="item in nationalities" :key="item.id" :label="item.nationality" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="民族">
                <el-select v-model="data.baseInfo.nation" placeholder="请选择" size="small">
                  <el-option v-for="item in nations" :key="item.id" :label="item.nation" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="w-full" :gutter="20">
            <el-col :span="6">
              <el-form-item label="文化">
                <el-select v-model="data.baseInfo.culture" placeholder="请选择" size="small">
                  <el-option v-for="item in cultures" :key="item.id" :label="item.eduBg" :value="item.eduBg" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="婚否">
                <el-select v-model="data.baseInfo.maritalStatus" placeholder="请选择" size="small">
                  <el-option label="是" value="是" />
                  <el-option label="否" value="否" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="婚龄">
                <el-input v-model="data.baseInfo.marryAge">
                  <template #append>
                    <span>岁</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="孕次">
                <el-input v-model="data.baseInfo.gravida">
                  <template #append>
                    <span>次</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="w-full" :gutter="20">
            <el-col :span="6">
              <el-form-item label="产次">
                <el-input v-model="data.baseInfo.parity">
                  <template #append>
                    <span>次</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="户籍">
                <el-input v-model="data.baseInfo.household"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工种">
                <el-select v-model="data.baseInfo.workType" placeholder="请选择" size="small">
                  <el-option v-for="item in works" :key="item.id" :label="item.type" :value="item.type" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="职业">
                <el-input v-model="data.baseInfo.occupation"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="w-full" :gutter="20">
            <el-col :span="6">
              <el-form-item label="服用叶酸">
                <el-select v-model="data.baseInfo.isTakeFolic" placeholder="请选择" size="small">
                  <el-option label="是" value="是" />
                  <el-option label="否" value="否" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="健康状况">
                <el-select v-model="data.baseInfo.isTakeFolic" placeholder="请选择" size="small">
                  <el-option label="健康" value="1" />
                  <el-option label="一般" value="2" />
                  <el-option label="差" value="3" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="常用情况">
                <el-select v-model="data.baseInfo.permanent" placeholder="请选择" size="small">
                  <el-option label="常住" value="1" />
                  <el-option label="临时" value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="流动人口">
                <el-select v-model="data.baseInfo.flowPopulation" placeholder="请选择" size="small">
                  <el-option label="是" value="1" />
                  <el-option label="否" value="2" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="w-full" :gutter="20">
            <el-col>
              <el-form-item label="药物过敏史">
                <el-checkbox-group v-model="data.baseInfo.drugAllergyHistory">
                  <el-checkbox value="无" name="type"> 无 </el-checkbox>
                  <el-checkbox value="青霉素" name="type"> 青霉素 </el-checkbox>
                  <el-checkbox value="头孢" name="type"> 头孢 </el-checkbox>
                  <el-checkbox value="先锋" name="type"> 先锋 </el-checkbox>
                  <el-checkbox value="链霉素" name="type"> 链霉素 </el-checkbox>
                  <el-checkbox value="磺胺" name="type">磺胺 </el-checkbox>
                  <el-checkbox value="其他" name="type">其他 </el-checkbox>
                </el-checkbox-group>
                <el-input style="width: 100px; padding-left: 10px" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="w-full" :gutter="20">
            <el-col>
              <el-form-item label="现住地址">
                <el-select v-model="data.baseInfo.address" placeholder="请选择省份" size="small" style="width: 20%;">
                  <el-option label="江苏" value="1" />
                  <el-option label="浙江" value="2" />
                </el-select>

                <el-select v-model="data.baseInfo.permanent" placeholder="请选择城市" size="small" style="width: 20%;">
                  <el-option label="苏州" value="1" />
                  <el-option label="南京" value="2" />
                </el-select>
                <el-select v-model="data.baseInfo.permanent" placeholder="请选择所在区域" size="small" style="width: 20%;">
                  <el-option label="江苏" value="1" />
                  <el-option label="浙江" value="2" />
                </el-select>
                <el-select v-model="data.baseInfo.permanent" placeholder="请选择所在街道" size="small" style="width: 20%;">
                  <el-option label="江苏" value="1" />
                  <el-option label="浙江" value="2" />
                </el-select>
                <el-input placeholder="请填写详细门派" style="width: 20%;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>

        <el-row>
          <div class="bg-blue-50 w-full mb-4">
            <span class="text-lg font-medium mb-4">家族病史</span>
          </div>

          <el-form-item label="家族史">
            <el-checkbox-group v-model="data.familyHistory">
              <el-checkbox value="无" name="familyHistory"> 无 </el-checkbox>
              <el-checkbox value="遗传病史" name="familyHistory"> 遗传病史 </el-checkbox>
              <el-checkbox value="精神病史" name="familyHistory">精神病史 </el-checkbox>
              <el-checkbox value="其他" name="familyHistory">其他 </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-row>

        <el-row>
          <div class="bg-blue-50 w-full mb-4">
            <span class="text-lg font-medium mb-4">既往病史</span>
          </div>
          <el-form-item label="既往史">
            <el-checkbox-group v-model="data.previousHistory">
              <el-checkbox value="无" name="previousHistory"> 无 </el-checkbox>
              <el-checkbox value="慢性高血压" name="previousHistory"> 慢性高血压 </el-checkbox>
              <el-checkbox value="妊娠高血压" name="previousHistory">妊娠高血压 </el-checkbox>
              <el-checkbox value="甲状腺疾病" name="previousHistory">甲状腺疾病 </el-checkbox>
              <el-checkbox value="心脏病" name="previousHistory">心脏病 </el-checkbox>
              <el-checkbox value="肝脏疾病" name="previousHistory">肝脏疾病 </el-checkbox>
              <el-checkbox value="贫血" name="previousHistory">贫血 </el-checkbox>
              <el-checkbox value="肾脏疾病" name="previousHistory">肾脏疾病 </el-checkbox>
              <el-checkbox value="糖尿病" name="previousHistory">糖尿病 </el-checkbox>
              <el-checkbox value="生殖器官畸形" name="previousHistory">生殖器官畸形 </el-checkbox>
              <el-checkbox value="乙肝病毒携带" name="previousHistory">乙肝病毒携带 </el-checkbox>
              <el-checkbox value="梅毒" name="previousHistory">梅毒 </el-checkbox>
              <el-checkbox value="HIV携带" name="previousHistory">HIV携带 </el-checkbox>
              <el-checkbox value="结核病" name="previousHistory">结核病 </el-checkbox>
              <el-checkbox value="其他" name="previousHistory">其他 </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-row>

        <el-row>
          <div class="bg-blue-50 w-full mb-4">
            <span class="text-lg font-medium mb-4">现在情况</span>
          </div>
          <el-form-item label="传染病">
            <el-checkbox-group v-model="data.presentSituation.infectiousDisease">
              <el-checkbox value="无" name="previousHistory"> 无 </el-checkbox>
              <el-checkbox value="乙肝" name="previousHistory"> 乙肝 </el-checkbox>
              <el-checkbox value="菌癣" name="previousHistory">菌癣 </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="接触">
            <el-checkbox-group v-model="data.presentSituation.touchInfectiousDisease">
              <el-checkbox value="无" name="previousHistory"> 无 </el-checkbox>
              <el-checkbox value="乙肝" name="previousHistory"> 乙肝 </el-checkbox>
              <el-checkbox value="菌癣" name="previousHistory">菌癣 </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-row>

        <el-row>
          <div class="bg-blue-50 w-full mb-4">
            <span class="text-lg font-medium mb-4">心理健康初筛评分</span>
          </div>
          <el-row class="w-full" :gutter="20">
            <el-col :span="6">
              <el-form-item label="PHQ-9">
                <el-input v-model="data.mentalHealthScore.PHQ_9">
                  <template #append>
                    <span>分</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="GAO-7">
                <el-input v-model="data.mentalHealthScore.GAO_7">
                  <template #append>
                    <span>分</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="PHQ-15">
                <el-input v-model="data.mentalHealthScore.PHQ_15">
                  <template #append>
                    <span>分</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="PHQ-9x">
                <el-checkbox-group v-model="data.mentalHealthScore.PHQ_9x">
                  <el-checkbox value="阴性">阴性</el-checkbox>
                  <el-checkbox value="阳性">阳性 </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>

        </el-row>
      </el-form>
    </el-col>
  </el-row>
  <!-- </div> -->
</template>

<script setup>
import { ref, onMounted, computed, reactive } from "vue";

import pinyin from "js-pinyin";
const recentRecords = [
  {
    name: "周雨婷",
    age: 28,
    phone: "138****5678",
    registrationTime: "2024-01-15 09:30",
    pregnancyWeek: "12周",
    idCard:'340121199603121234',
    idCardType:"身份证",
    doctor: "张晓华",
    status: "已完成",
  },
  {
    name: "刘美琪",
    age: 30,
    phone: "139****4321",
    registrationTime: "2024-01-15 10:15",
    pregnancyWeek: "8周",
    idCard: '340121199603121234',
    idCardType: "身份证",
    doctor: "王丽娜",
    status: "进行中",
  },
  {
    name: "郑佳怡",
    age: 26,
    phone: "137****9876",
    registrationTime: "2024-01-15 11:00",
    pregnancyWeek: "16周",
    idCard: '340121199603121234',
    idCardType: "身份证",
    doctor: "李明珠",
    status: "已完成",
  },
  {
    name: "陈思颖",
    age: 32,
    phone: "135****2468",
    registrationTime: "2024-01-15 14:30",
    pregnancyWeek: "20周",
    idCard: '340121199603121234',
    idCardType: "身份证",
    doctor: "赵雪梅",
    status: "已完成",
  },
  {
    name: "林诗雨",
    age: 29,
    phone: "136****1357",
    registrationTime: "2024-01-15 15:45",
    pregnancyWeek: "10周",
    idCard: '340121199603121234',
    idCardType: "身份证",
    doctor: "孙婷婷",
    status: "进行中",
  },
];
const search = ref("");
const filterRecords = computed(() =>
  recentRecords.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);
//选中行
const handleCurrentChange = (row) => {
  console.log(row, "<row");
  //todo相关数据还是需要再次调用后端接口查询 咱次模拟
  data.baseInfo.name=row.name
  data.baseInfo.phone=row.phone
  data.baseInfo.age=row.age
  data.baseInfo.week = row.pregnancyWeek
  data.filingTime= row.registrationTime
  data.baseInfo.idCard=row.idCard //身份证
  data.baseInfo.idCardType=row.idCardType//证件类型
};
const options = [
  { id: 1, type: "身份证" },
  { id: 2, type: "港澳通行证" },
  { id: 3, type: "护照" },
  { id: 4, type: "户口本" },
];
const cultures = [
  { id: 1, eduBg: "高中" },
  { id: 2, eduBg: "大专" },
  { id: 3, eduBg: "本科" },
  { id: 4, eduBg: "硕士" },
];
const nationalities = [
  { id: 1, nationality: "中国" },
  { id: 2, nationality: "其他" },
];
const nations = [
  { id: 1, nation: "汉族" },
  { id: 2, nation: "回族" },
  { id: 3, nation: "维吾尔族" },
  { id: 4, nation: "满族" },
];
const works = [
  { id: 1, type: "单位负责人" },
  { id: 2, type: "专业技术人员" },
  { id: 3, type: "办事员" },
  { id: 4, type: "普通职员" },
  { id: 5, type: "其他" },
];
//表单数据
const data = reactive({
  baseInfo: {
    name: "", //孕妇姓名
    medicalNo: 10063, //病历号
    week: 12, //孕周
    pinyinName: "",
    dueDate: "", //预产期
    idCard: "", //身份证
    idCardType: null, //证件类型
    age: null, //年龄
    phone: "", //手机号码
    nation: "", //民族
    nationality: "", //国籍
    culture: "", //文化
    maritalStatus: "是", //婚否
    gravida: "", //孕次
    marryAge: "", //婚龄
    parity: "", //产次
    workType: "", //
    occupation: "", //职业
    household: "", //户籍
    isTakeFolic: "", //是否服用叶酸
    permanent: "", //常住情况
    flowPopulation: "", //是否是流动人口
    drugAllergyHistory: ['无'], //药物过敏史
    address: "", //现住地址
  },
  doctorName: "张医生", //医生姓名
  filingTime: "2025-01-02", //建档时间
  familyHistory: ['无'], //家族史
  previousHistory: ['无'], //既往史
  presentSituation: {
    infectiousDisease: ['无'],
    touchInfectiousDisease: ['无'],
  }, //现在情况
  mentalHealthScore: {
    PHQ_9:5,
    GAO_7:5,
    PHQ_15:5,
    PHQ_9x:['阴性']

  }, //心理健康评分
});

//新建 
const  newBook = ()=>{
  //点击新建
  console.log('新建')
}
</script>
<style lang="less" scoped>
.demo-form-inline .el-form-item {
  width: 100%;
  
}


// .demo-form-inline .el-select {
//   --el-select-width: 115px;
// }
.demo-form-inline .el-form-item .el-select {
  width: 100%;
}
</style>
